<template>
  <div>
    <section class="haruyuki-bg-color-white">
      <!-- 项目信息 -->
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-size-16 haruyuki-mb-10">
          <i class="el-icon-info"></i>
          <span class="haruyuki-ml-6">项目信息</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>分账项目编号：{{ basicData.projectCode }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账项目名称：{{ basicData.projectName }}</span>
          </el-col>
          <el-col :span="8">
            <span>通道简称：{{ basicData.aisleKindName }}</span>
          </el-col>
          <el-col :span="8">
            <span>通道名称：{{ basicData.aisleName }}</span>
          </el-col>
          <el-col :span="8">
            <span>通道供应商名称：{{ basicData.aisleCompanyName }}</span>
          </el-col>
          <el-col :span="8">
            <span>分账种类：{{ basicData.divisionKindName }}</span>
          </el-col>
          <el-col :span="8">
            <span>联系人：{{ basicData.contactName }}</span>
          </el-col>
          <el-col :span="8">
            <span>联系方式：{{ basicData.contactPhone }}</span>
          </el-col>
          <el-col :span="8">
            <span>登录账户：{{ basicData.account }}</span>
          </el-col>
          <el-col :span="8">
            <span>创建时间：{{ basicData.createTime }}</span>
          </el-col>
        </el-row>
      </div>

      <!-- 其他信息 -->
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-size-16 haruyuki-mb-10">
          <i class="el-icon-menu"></i>
          <span class="haruyuki-ml-6">其他信息</span>
        </div>
      </div>
      <div class="haruyuki-content merchant-box">
        <div
          class="merchant-icon-func"
          style="margin-bottom: 30px"
          v-for="moduleItem in moduleData"
          :key="moduleItem.id"
        >
          <div v-if="moduleItem.show">
            <el-image
              class="cursor"
              style="width: 60px; height: 60px"
              :src="moduleItem.image"
              fit="fill"
              @click="moduleOperate(moduleItem.id)"
            ></el-image>
            <div class="cursor">{{ moduleItem.name }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 表单弹窗 -->
    <el-dialog
      class="el-dialog__wrapper avue-dialog avue-crud__dialog"
      :title="dialogText"
      :visible.sync="dialogVisible"
      append-to-body
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="changeForm"
        :rules="rules"
        size="small"
        label-width="120px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="变更类型" prop="changeType">
              <select-dict
                ref="changeType"
                :select.sync="changeForm.changeType"
                code="division_change_type"
                placeholder-text="变更类型"
                @change="changeTypeSelect"
              ></select-dict>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="alter-basic" v-if="changeForm.changeType">
          <div class="row-alter alter-width-4x">
            <div class="col-alter border-bottom">
              <span class="alter-title">变更内容</span>
            </div>
            <div class="col-alter" v-if="changeForm.changeType === '1'">项目名称</div>
            <div class="col-alter" v-if="changeForm.changeType === '1'">联系人</div>
            <div class="col-alter" v-if="changeForm.changeType === '1'">联系方式</div>
            <div class="col-alter" v-if="changeForm.changeType === '2'">登录账户</div>
            <div class="col-alter" v-if="changeForm.changeType === '3'">登录密码</div>
          </div>
          <div class="row-alter alter-width-4x">
            <div class="col-alter border-bottom">
              <span class="alter-title">{{ changeForm.changeType === '3'?'重置密码':'变更前内容' }}</span>
            </div>
            <div class="col-alter" v-if="changeForm.changeType === '1'">{{ basicData.projectName }}</div>
            <div class="col-alter" v-if="changeForm.changeType === '1'">{{ basicData.contactName }}</div>
            <div class="col-alter" v-if="changeForm.changeType === '1'">{{ basicData.contactPhone }}</div>
            <div class="col-alter" v-if="changeForm.changeType === '2'">{{ basicData.account }}</div>
            <div class="col-alter cols" v-if="changeForm.changeType === '3'">
              <el-form-item label="" label-width="0" prop="password">
                <el-input
                  class="haruyuki-width-100"
                  type="password"
                  v-model="changeForm.password"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="row-alter alter-width-4x">
            <div class="col-alter border-bottom">
              <span class="alter-title">{{ changeForm.changeType === '3'?'确认密码':'变更后内容' }}</span>
            </div>
            <div class="col-alter cols" v-if="changeForm.changeType === '1'">
              <el-form-item label="" label-width="0" prop="projectName">
                <el-input
                  class="haruyuki-width-100"
                  type="text"
                  v-model="changeForm.projectName"
                ></el-input>
              </el-form-item>
            </div>
            <div class="col-alter cols" v-if="changeForm.changeType === '1'">
              <el-form-item label="" label-width="0" prop="contactName">
                <el-input
                  class="haruyuki-width-100"
                  type="text"
                  v-model="changeForm.contactName"
                ></el-input>
              </el-form-item>
            </div>
            <div class="col-alter cols" v-if="changeForm.changeType === '1'">
              <el-form-item label="" label-width="0" prop="contactPhone">
                <el-input
                  class="haruyuki-width-100"
                  type="phone"
                  v-model="changeForm.contactPhone"
                ></el-input>
              </el-form-item>
            </div>
            <div class="col-alter cols" v-if="changeForm.changeType === '2'">
              <el-form-item label="" label-width="0" prop="account">
                <el-input
                  class="haruyuki-width-100"
                  type="text"
                  v-model="changeForm.account"
                ></el-input>
              </el-form-item>
            </div>
            <div class="col-alter cols" v-if="changeForm.changeType === '3'">
              <el-form-item label="" label-width="0" prop="confirmPassword">
                <el-input
                  class="haruyuki-width-100"
                  type="password"
                  v-model="changeForm.confirmPassword"
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
      <span
        slot="footer"
        class="avue-dialog__footer avue-dialog__footer--right"
      >
        <el-button
          size="small"
          type="primary"
          v-preventClick
          @click="handleSubmit"
          >确 定</el-button
        >
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
import { update, getDetail } from "@/api/rb-oem/separateProject/separate_project";
import { mapGetters } from "vuex";
import selectDict from "@/components/select-dict/select-dict";

export default {
  name: "ProjectDetails",
  props: {
    projectId: {
      type: String,
      required: true,
    },
  },
  data() {
    // 密码验证规则
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.changeForm.confirmPassword !== "") {
          this.$refs.form.validateField("confirmPassword");
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.changeForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      basicData: {
        projectCode: "",
        projectName: "",
        aisleCode: "",
        aisleCompanyCode: "",
        aisleCompanyName: "",
        aisleKind: "",
        aisleKindName: "",
        aisleName: "",
        contactName: "",
        contactPhone: "",
        account: "",
        divisionKind: "",
        divisionKindName: "",
        createTime: "",
        image: "",
      },
      moduleData: [
        {
          id: 1,
          name: "信息变更",
          image: "/img/merchant-icon/service.png",
          type: "change",
          show: true,
        },
      ],
      dialogVisible: false,
      dialogType: "",
      dialogText: "信息变更",
      changeForm: {
        changeType: null,
        projectName: '',
        contactName: '',
        contactPhone: '',
        account: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        contactName: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        contactPhone: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        account: [
          { required: true, message: "请输入登录账户", trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  components: {
    selectDict,
  },
  created() {
    this.getProjectDetail();
  },
  methods: {
    getProjectDetail() {
      getDetail(this.projectId).then((res) => {
        if (res.data.success) {
          this.basicData = res.data.data;
        }
      });
    },
    /**
     * @func 商户模块管理
     * @desc 商户模块管理 操作控制
     * */
    moduleOperate(id) {
      switch (id) {
        case 1:
          this.dialogVisible = true;
          break;
        case 2:
          break;
      }
    },
    changeTypeSelect(e) {
        this.$refs['form'].resetFields();
        this.changeForm.changeType = e;
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "提交中...",
            spinner: "el-icon-loading",
          });
          update({...this.changeForm, 'projectCode': this.basicData.projectCode})
            .then(() => {
              this.$message.success("操作成功");
              this.dialogVisible = false;
              this.getProjectDetail();
              this.$refs['form'].resetFields();
            })
            .finally(() => {
              loading.close();
            });
        }
      });
    },
    handleClose(done) {
      this.$refs.form.resetFields();
      done();
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.haruyuki-bg-color-white {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.haruyuki-content {
  padding: 20px;
  margin-bottom: 30px;

  .el-col {
    margin-bottom: 15px;
  }
}

.haruyuki-ml-6 {
  margin-left: 6px;
}

.haruyuki-mb-10 {
  margin-bottom: 10px;
}

.haruyuki-flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.haruyuki-align-items-center {
  align-items: center;
}

.merchant-box {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  &.adaptive {
    width: 100%;
    margin-left: -10px;
    margin-right: -10px;
  }
  .merchant-item-content {
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);
    span {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
    }
  }
  .merchant-icon-func {
    width: calc(100% / 5);
    margin-bottom: 20px;
    text-align: center;
    .cursor {
      cursor: pointer;
    }
  }
  .merchant-icon-card {
    width: calc(100% / 4);
    .item-card {
      // display: flex;
      border-radius: 10px;
      background-color: #ffffff;
      padding: 20px;
      text-align: center;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      .item-card-label {
        display: flex;
        align-items: center;
      }
      .item-card-content {
        display: flex;
        align-items: center;
        margin-top: 20px;
      }
    }
  }
}

.alter-basic {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  border: 1px solid #ebeef5;

  .alter-title {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
  }
}

.row-alter {
  display: flex;
  flex-direction: column;
  &:nth-child(1) {
    color: #485563;
    font-weight: bold;
  }
  &:nth-child(n + 2) {
    border-left: 1px solid #ebeef5;
  }
}

.col-alter {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 46px;
  height: 46px;
  // margin-bottom: 6px;
  font-size: 14px;
  &.border-bottom {
    border-bottom: 1px solid #ebeef5;
    word-break: break-word;
    background-color: #fafafa;
  }
  &.margin-top {
    margin-top: 6px;
  }
  &.margin-bottom {
    margin-bottom: 6px;
  }
}
.cols div:first-child:before {
  margin-top: 6px;
}
</style>